<template>
  <div class="wrapper">
    <div class="header">
      <div>
        <el-icon><user /></el-icon>
        <span>用户1</span>
      </div>
      <div class="center">
        <el-input
          :prefix-icon="Search"
          placeholder="请输入昵称"
          class="search-btn"
        />
      </div>
      <div class="right">
        <div class="item">
          <el-icon><collection /></el-icon>
          <span>收藏</span>
        </div>
        <div class="item">
          <el-icon><histogram /></el-icon>
          <span>排行</span>
        </div>
        <div class="item">
          <el-icon><microphone /></el-icon>
          <span>语聊大厅</span>
        </div>
        <div class="item">
          <el-icon><chat-line-square /></el-icon>
          <span>消息</span>
        </div>
        <div class="item">
          <el-icon><home-filled /></el-icon>
          <span>返回首页</span>
        </div>
      </div>
    </div>
    <div class="layout">
      <div class="layout-left">
        <div class="name">
            <img src="../assets/img/left-1.png">
        </div>
        <div class="room-motice">
          <el-icon><mute-notification /></el-icon>
          房间公告 <br>
        </div>
        <!-- <div class="online-tab">
          <el-tabs type="border-card">
            <el-tab-pane label="在线"></el-tab-pane>
            <el-tab-pane label="贵宾"></el-tab-pane>
            <el-tab-pane label="排麦"></el-tab-pane>
          </el-tabs>
        </div> -->
      </div>
      <div class="layout-main">
        <div class="avatar-wrapper">
          <img src="../assets/img/main-1.png" class="top" />
        </div>
        <div class="other">
          <img src="../assets/img/main-2.png" class="other-img" />
          <img src="../assets/img/main-3.png" class="other-img" />
          <img src="../assets/img/main-4.png" class="other-img" />
          <img src="../assets/img/main-5.png" class="other-img" />
        </div>
        <div class="present">
          <el-tabs type="border-card">
            <el-tab-pane label="热门"></el-tab-pane>
            <el-tab-pane label="土豪包场"></el-tab-pane>
            <el-tab-pane label="情人专场"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="layout-right">
        <div class="rank">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="财富榜" name="first">
              <img src="../assets/img/icon-1.png" class="avatar" />
              <img src="../assets/img/icon-2.png" class="avatar" />
            </el-tab-pane>
            <el-tab-pane label="魅力榜" name="second"> </el-tab-pane>
          </el-tabs>
        </div>
        <div class="chat-wrapper">
          <div class="list">
            <ol v-for="(item, index) in list" :key="index">
              <span>用户{{ index + 1 }}:</span
              >{{
                item.val
              }}
            </ol>
          </div>
          <div class="icon-wrapper">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              <el-button type="primary" :icon="Picture" circle></el-button>
            </el-upload>
            <el-button
              @click="openSvg"
              type="primary"
              :icon="ShoppingBag"
              circle
              style="margin-left: 10px"
            ></el-button>
            <el-button
              @click="openVideo"
              type="primary"
              :icon="VideoPlay"
              circle
              style="margin-left: 10px"
            ></el-button>
          </div>
          <div class="chat-btn">
            <el-input
              class="ipt"
              placeholder="请输入聊天内容"
              v-model="message"
            ></el-input>
            <el-button type="primary" class="chat-submit" @click="submitMsg"
              >发送</el-button
            >
          </div>
          <div class="svg-wrapper" v-if="showSvg">
            <div class="star"></div>
            <svg width="200" height="200" fill="none" class="svg1">
              <defs>
                <linearGradient
                  id="linear"
                  x1="10%"
                  y1="60%"
                  x2="70%"
                  y2="-10%"
                >
                  <stop offset="0%" stopColor="#474be4" />
                  <stop offset="50%" stopColor="#fff" />
                  <stop offset="100%" stopColor="#474be4" />
                </linearGradient>
              </defs>
              <circle
                id="circle-back"
                strokeWidth="10"
                cx="100"
                cy="100"
                r="60"
                stroke="url(#linear)"
              />
              <circle
                id="circle"
                strokeWidth="2"
                strokeDasharray="0 377"
                strokeDashoffset="377"
                strokeLinecap="round"
                cx="100"
                cy="100"
                r="60"
                stroke="#faff07"
              />
            </svg>
          </div>
          <div class="mp4-wrapper" v-show="showVideo">
            <video controls width="250">
              <source src="../assets/flower.webm" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  User,
  Search,
  Collection,
  Histogram,
  ChatLineSquare,
  HomeFilled,
  Microphone,
  MuteNotification,
  Picture,
  ShoppingBag,
  VideoPlay,
} from "@element-plus/icons-vue";
import { ref } from "vue";
let list = ref([]);
let message = ref("");
let showSvg = ref(false);
let svgVisible = ref(false);
let showVideo = ref(false);
const activeName = ref("first");
function submitMsg() {
  list.value.push({
    val: message.value,
  });
  message.value = "";
}
function openSvg() {
  showSvg.value = !showSvg.value;
}
function openVideo() {
  showVideo.value = !showVideo.value;
}
</script>
<style scoped>
.wrapper {
  color: #e5e5e5;
}
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  top: 0;
  height: 100px;
  background-color: #090027;
}
.right {
  display: flex;
}
.item {
  display: flex;
  flex-direction: columns;
  /* flex-direction: columns; */
}
.item + .item {
  margin-left: 10px;
}
.chat-wrapper {
  background-color: #10031e;
  /* background: linear-gradient(#330066, 30%, #10031E); */
}
.search-btn {
  width: 200px;
  border-radius: 30px;
}
.layout {
  width: 100%;
  display: flex;
}
.layout .layout-left {
  width: 300px;
  border: 1px solid #e5e5e5;
  background-color: #090027;
  /* display: flex; */
  /* flex-direction: columns; */
}
.room-motice {
    height: 30%;
}
/* .online-tab {
    position
} */
.layout .layout-main {
  flex: 1;
  border: 1px solid #e5e5e5;
  margin: 0 8px;
  background-color: #0c0233;
  position: relative;
}
.present {
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #13052e !important;
}
.layout-right {
margin-top: 1px;
  width: 300px;
  /* height: calc(100% - 100px); */
}
.rank {
  background-color: #0e022d;
  height: 20%;
}
/* .chat-wrapper {
        height: 30%;
    } */
.list {
  width: 300px;
  margin: 0 auto;
  height: 500px;
  border: 1px solid #e5e5e5;
  text-align: left;
}
.list ol {
  margin: 0;
  padding-top: 5px;
  padding-left: 8px;
}
.icon-wrapper {
  margin: 10px 0 5px 0;
  display: flex;
  justify-content: center;
}
.avatar-uploader {
  display: flex;
  justify-content: center;
}
.avatar-wrapper {
  width: 300px;
  /* border: 1px solid red; */
  background-color: #251d43;
  border-radius: 50px;
  margin: 20px auto;
}
.top {
  margin-top: 30px;
  width: 100px;
  height: 100px;
}
.other-img {
  width: 80px;
  height: 80px;
  margin-left: 20px;
}
.chat-btn {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}
.ipt {
  width: 200px;
  height: 30px;
  line-height: 30px;
  /* border: 1px solid #e5e5e5; */
  border-radius: 5px;
}
.chat-submit {
  margin-left: 4px;
  height: 30px;
  line-height: 30px;
  /* background-color: #ddd; */
}

.svg-wrapper {
  position: absolute;
  width: 300px;
  left: 70%;
  top: 70%;
}
.star {
  width: 200px;
  height: 200px;
  background: url(https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8152312362/55ac/a701/d83d/b701fe0865a214d241d85b3cf1a37c2b.png)
    no-repeat center/100%;
}
.avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-left: 20px;
}

.svg1 {
  position: absolute;
  left: 23px;
  top: 0;
  perspective: 800px;
  transform: rotateX(110deg) rotateZ(-250deg) skewX(35deg) translateZ(-10px);
  #circle {
    animation: path 2s linear forwards, moveDasharray 2s 2.01s linear infinite;
  }
}
@keyframes path {
  0% {
    stroke-dasharray: 0 377;
    /* stroke: #11277c; */
  }

  100% {
    stroke-dasharray: 352 21;
    /* stroke: #faff07; */
  }
}

@keyframes moveDasharray {
  0% {
    stroke-dashoffset: 377;
  }

  100% {
    stroke-dashoffset: 0;
  }
}
.mp4-wrapper {
  position: absolute;
  top: 76%;
  left: 80%;
}
</style>
